{include file='/public/index-header'}
<body>
    {include file='/public/index-nav'}
    <div class="layui-container ws-container">
        <div class="layui-row" style="margin-top: 40px;">
            <div class="layui-col-md2 layui-col-xs2">
                <div class="layui-panel" style="height: 360px;border-style: none;">
                    {if !empty($category)}
                    <ul class="layui-menu" style="height: 100%;background: rgba(0,0,0,.8);margin: 0px;">
                        {foreach $category as $key => $value}
                            <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                                <a href="{:sysuri('/index/practice.course')}?nav_id={$course_nav_id}&ct_id={$value['id']}">
                                    <div class="layui-menu-body-title menu-title">
                                        {:lang($value['name'])}
                                        <i class="layui-icon layui-icon-right"></i>
                                    </div>
                                </a>
                                <div class="layui-panel layui-menu-body-panel" style="margin-left: 0px;width: 270px;height: 200px;overflow:hidden;">
                                    {if !empty($value['sub'])}
                                    <ul style="overflow: hidden;">
                                        {foreach $value['sub'] as $sub_key => $sub_value}
                                        <li><a href="{:sysuri('/index/practice.course')}?nav_id={$course_nav_id}&ct_id={$sub_value['pid']}&sub_ct_id={$sub_value['id']}" style="color: initial;">
                                            <div class="layui-menu-body-title sub_title">{:lang($sub_value['name'])}</div>
                                        </a></li>
                                        {/foreach}
                                    </ul>
                                    {/if}
                                </div>
                            </li>
                        {/foreach}
                    </ul>
                    {/if}
                </div>
            </div>
            <div class="layui-col-md10 layui-col-xs10">
                <div class="layui-carousel" id="carousel-image">
                    {if !empty($banners)}
                    <div carousel-item>
                        {foreach $banners as $key => $value}
                        <div><a href="{$value['link']|default=''}"><img src="{$value['image']|default=''}"></a></div>
                        {/foreach}
                    </div>
                    {/if}
                </div>
            </div>
        </div>
        {if !empty($intros)}
        {foreach $intros as $key => $value}
        <div class="layui-row" style="margin: 40px 0px;">
            <div class="layui-col-xs12 layui-col-md12">
                <div class="" style="text-align: center;">
                    <h2 class="title__line layui-anim layui-anim-fadein">{:lang($value['name'])}</h2>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-md12" style="margin: 20px 0px;">
                <div class="banner_intro">
                    <a href="{$value['link']|default=''}"><img src="{$value['image']|default=''}" alt=""></a>
                </div>
            </div>
        </div>
        {/foreach}
        {/if}
    </div>
    {include file='/public/index-foot'}
</body>
<style type="text/css">
    .title__line {
        color: #34495e;
        font-size: 30px;
        font-weight: 400;
        margin-bottom: 5px;
        opacity: 0
    }
    #carousel-image img {
        width: 100%;
        height: 100%;;
    }
    .banner_intro {
        height: 345px;
    }
    .banner_intro img {
        width: 100%;
        height: 100%;
    }
    .menu-title{
        color: #fff;
    }
    .layui-menu-item-parent .menu-title:hover {
        color: #333;
    }
    .layui-menu li:hover .menu-title {
        color: #333;
    }
</style>
<script type="text/javascript">
    layui.use(function(){
      let carousel = layui.carousel;
      // 渲染 - 图片轮播
      carousel.render({
        elem: '#carousel-image',
        width: 'auto',
        height: '360px',
        interval: 3000
      });
    });
</script>